<template>
    <div>
        <v-header>
            <div slot="left" class="backs_icon"></div>
        </v-header>
        <div class="main_allScroll">
            <group>
                <x-input title="新登录密码" placeholder="请输入新登录密码" novalidate :show-clear="false" placeholder-align="right" text-align="right" v-model="loginPassword" type="password"></x-input>
                <x-input title="新支付密码" placeholder="请输入新支付密码" novalidate :show-clear="false" placeholder-align="right" text-align="right" v-model="payPassword" type="password"></x-input>
            </group>
            <button class="btns" :class="disabled" :disabled="disabled != ''"  @click="confirm">确认</button>
            <v-validCode :mobile="authorization.info.wmobileNo" :codeFlag="codeFlag" nextText="授权" @nextStep="nextStep" @closeMask="closeMask"></v-validCode>
        </div>
        <div v-transfer-dom>
            <popup v-model="show" position="top" is-transparent="true" :hide-on-blur="false"
                   should-scroll-top-on-show height="100%">
                <div class="authorzatiton_alert">
                    <p class="text" style="margin-bottom: .36rem">授权成功</p>
                    <p style="margin-bottom: .36rem">恭喜你，授权成功，需要重新登录。<br>赶快去登录吧～</p>
                    <div class="alert_btn" @click="Interactive.activityWebDismiss()">
                        <span>去登录</span>
                    </div>
                </div>
            </popup>
        </div>
    </div>
</template>
<script>
    import { XInput, Group } from 'vux'
    import {TransferDom, Popup} from 'vux'
    import {mapState,mapActions} from 'vuex'
    export default {
        name: 'withSuc',
        directives: {
            TransferDom
        },
        components: { XInput, Group,Popup },
        data: function () {
            return {
                loginPassword: '',
                payPassword: '',
                disabled:'disabled',
                show:false,
                codeFlag:false,
            }
        },
        activated:function(){
            this.init()
        },
        methods: {
            init(){
                this.loginPassword= '';
                this.payPassword= '';
                this.disabled='disabled';
                this.show = false
                this.codeFlag = false
            },
            confirm(){
                this.codeFlag = true
            },
            nextStep(data){
                this.codeFlag = false
                this.identification(data)
            },
            closeMask(){
                this.codeFlag = false
            },
            identification(data){
                this.$ajax.identification({
                    validCode:data,
                    userId:this.authorization.info.userId,
                    password:this.comJS.cryptoPassword(this.authorization.info.wmobileNo.trim() + this.loginPassword.trim()),
                    paymentPassword:this.comJS.cryptoPassword(this.authorization.info.wmobileNo.trim() + this.payPassword.trim()),
                })
                    .then(res=>{
                        this.show = true
                    })
            },
            checkTel(){
                if ( this.loginPassword.trim() && this.loginPassword.trim().length >= 4 && this.payPassword.trim() && this.payPassword.trim().length >= 4) {
                    this.disabled = ''
                }else{
                    this.disabled = 'disabled'

                }
            }
        },
        watch:{
            loginPassword:function () {
                this.checkTel()
            },
            payPassword:function () {
                this.checkTel()
            },
        },
        computed:mapState({authorization:state=>state.authorization})
    }
</script>
<style lang="less" scoped>
    @import "./css/common.css";
    .authorzatiton_alert{
        width: 5.64rem;
        height: 6.7rem;
        background: url("../../assets/img/authorzatiton_alert.png") no-repeat;
        background-size: 100% 100%;
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        margin: auto;
        padding-top: 3.06rem;
    }
    .alert_btn{
        width: 4.64rem;
        height: 1.36rem;
        background: url("../../assets/img/authorzatiton_alert_btn.png") no-repeat;
        background-size: 100% 100%;
        margin: 0 auto;
        text-align: center;
        line-height: 1.36rem;
        color: #fff;
        font-size: .32rem;
    }
    p{
        text-align: center;
    }
    .text{
        font-size: .32rem;
        color: #333;
        margin-bottom: .42rem;
        text-align: center;
        & + p{
            font-size: .28rem;
            color: #888;
            line-height: 1.5;
        }
    }
</style>